<template>
    <div>
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="伙伴信息" name="伙伴信息">
                <el-table :data="tableData.rows" style="width: 100% ; background-color: red;">
                    <el-table-column label="序号" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="图片" width="180">
                        <template slot-scope="scope">
                            <!-- <span>{{ scope.row.pic }}</span> -->
                            <img src="../../assets/1.png" alt="" class="imgs">
                        </template>
                    </el-table-column>
                    <el-table-column label="合作伙伴名称" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="合作伙伴简介" width="800">
                        <template slot-scope="scope">
                            <span>{{ scope.row.content }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handletea(scope.$index, scope.row.id)"
                                type="info">置顶</el-button>
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                                type="success">编辑</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-size="5" layout="prev, pager, next" :total="this.tableData.total">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="新增信息" name="新增信息">
                <div style="width: 100%;">
                    <h3 style="text-align: left; margin-bottom: 20px;">标题设置</h3>

                    <el-table :data="titleData" style="width: 100%" :row-class-name="tableRowClassName">
                        <el-table-column prop="date" label="伙伴名称" width="600">
                            <template slot-scope="scope">
                                <div>
                                    <el-input class="inp" v-model="inputName" placeholder="请输入新闻标题"
                                        style="text-align: left;"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="状态" width="300" text-color="#3BFFFF">
                            <template slot-scope="scope">
                                <!-- <el-radio v-model="radio" label="1" name="a">启用</el-radio>
                                <el-radio v-model="radio" label="2" name="a">禁用</el-radio> -->

                                <el-radio-group v-model="radio">
                                    <el-radio v-model="radio" label="0">启用</el-radio>
                                    <el-radio v-model="radio" label="1">禁用</el-radio>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" class="px" label="排序">
                            <template slot-scope="scope">
                                <el-input class="xh" type="number" v-model="inputSort" placeholder="请选择序号"
                                    style="text-align: left;"></el-input>
                            </template>

                        </el-table-column>
                        <el-table-column prop="address" label="上传logo">
                            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-table-column>
                    </el-table>
                    <div style="width: 1738px; height: 780px; background-color: #fff;  ;padding: 20px;">
                        <h3 style="text-align: left;  margin-bottom: 20px;">编辑内容</h3>
                        <el-input class="count" v-model="inputCount" placeholder="请输入内容"></el-input>
                        <div style="margin-top: 80px;">
                            <el-button style="width: 120px;height: 40px; margin-right: 20px;">预览</el-button>
                            <el-button type="primary" style="width: 120px;height: 40px; margin-left: 20px;"
                                @click="addPartner1">提交</el-button>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible.sync="dialogVisible" title="预览表单"> <!-- 使用 dialog 组件包裹表单，通过 visible.sync 双向绑定控制显示隐藏 -->
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="序号" prop="xh">
                    <el-input v-model="ruleForm.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="合作伙伴名称" prop="name">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="合作伙伴简介" prop="jj">
                    <el-input v-model="ruleForm.content" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style>
.imgs {
    width: 100px;
    height: 100px;
}

.el-form-item__label {
    width: 200px !important;
    text-align: center !important;
}

.el-form-item__content .el-input .el-input__inner {
    height: 50px !important;
}

.el-upload {
    width: 140px !important;
    height: 70px !important;
    line-height: 70px;
}

.el-table__header {
    background-color: #F6F8FB;
}

* {
    margin: 0;
    padding: 0;
}

.inp .el-input__inner {
    width: 445px;
    height: 60px !important;
}

.el-input__inner {
    height: 220px;
    background-color: #F6F8FB;
}

.el-input__inner.custom-placeholder:-ms-input-placeholder {
    color: #909090;
    transform: translateY(-25%);
    /* 向上移动25% */
}

.xh .el-input__inner {
    width: 113px;
    height: 30px;
}

.el-radio input[aria-hidden="true"] {
    display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}
</style>
<script>
import { addPartner, getHbData, deleteHbData, upHbData, getDetail } from '../../request/api/all'
export default {
    methods: {
        // 分页的每页几条
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 分页的当前页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            this.getHbData1()
        },
        // 置顶
        async handletea(index, row) {
            console.log(index, row);
            let res = await getDetail(row)
            console.log(res);
            // 构造置顶请求需要的数据参数，这里假设后端接口需要的数据格式包含数据的id以及一个表示置顶状态的字段（比如top设为1表示置顶，0表示不置顶，具体根据后端接口定义调整）
            const params = {
                "content": res.data.data.content,
                "id": res.data.data.id,
                "name": res.data.data.name,
                "pictureId": res.data.data.pictureId,
                "sort": res.data.data.sort,
                "status": res.data.data.status,
                "top": 0
            };
            try {
                // 调用后端置顶接口，这里使用upHbData函数，假设它能正确处理置顶请求并返回相应结果
                let updateRes = await upHbData(params);
                console.log('置顶操作结果', updateRes);
                if (updateRes && updateRes.status === 200) {
                    // 置顶成功后，重新获取数据列表来更新前端展示，调用已有的获取数据列表的方法
                    await this.getHbData1();
                    this.$message({
                        type: 'success',
                        message: '置顶成功!'
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '置顶操作在服务器端执行失败，请稍后重试！'
                    });
                }
            } catch (error) {
                console.error('置顶接口调用出错:', error);
                this.$message({
                    type: 'error',
                    message: '网络或服务器出现问题，置顶失败，请稍后重试！'
                });
            }
        },
        // 弹窗确定
        async handleSubmit(row) {
            console.log('row', row);
            // 将表单中修改后的数据回写到row对象对应的字段
            const params = {
                "content": this.ruleForm.content,
                "id": this.ruleForm.id,
                "name": this.ruleForm.name,
                "pictureId": this.ruleForm.pictureId,
                "sort": this.ruleForm.sort,
                "status": this.ruleForm.status,
                "top": this.ruleForm.top
            };
            let res = await upHbData(params);
            console.log('edit', res);
            this.dialogVisible = false;
        },
        // 编辑
        handleEdit(index, row) {
            // 点击提交时，将输入框的值赋给表单对应字段
            this.ruleForm = row
            this.dialogVisible = true;
            console.log(index, row);
        },
        async handleDelete(index, id) {
            console.log(index, 'rowww', id);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                console.log('delid', id);
                let deletes = await deleteHbData(id);
                console.log('del', deletes);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getHbData1();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async handleRemove(file, fileList) {
            console.log(file, fileList);
            try {
                // 假设接口需要传递文件的某个唯一标识比如file.id等，根据实际情况调整参数
                await deleteFile(file.id);
                this.$message({
                    type: 'success',
                    message: '文件删除成功！'
                });
            } catch (error) {
                console.error('文件删除接口调用出错:', error);
                this.$message({
                    type: 'error',
                    message: '文件删除失败，请稍后重试！'
                });
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        async addPartner1() {
            // 进行前端数据验证
            if (!this.inputName || this.inputName.trim() === '') {
                this.$message({
                    type: 'error',
                    message: '合作伙伴名称不能为空'
                });
                return;
            }
            if (!Number.isInteger(Number(this.inputSort))) {
                this.$message({
                    type: 'error',
                    message: '排序序号必须为整数'
                });
                return;
            }
            const params = {
                "content": this.inputCount,
                "id": this.id,
                "name": this.inputName,
                "pictureId": this.pictureId,
                "sort": Number(this.inputSort),
                "status": Number(this.radio),
                "top": this.top
            };
            try {
                let res = await addPartner(params);
                if (res && res.status === 200) {
                    console.log('接口调用成功，返回结果:', res.data);
                    this.$message({
                        type: 'success',
                        message: '新增合作伙伴数据成功！'
                    });
                    // 清空输入框等操作，可根据实际需求添加
                    this.inputName = '';
                    this.inputSort = 0;
                    this.inputCount = '';
                    this.radio = 0;
                    this.getHbData1();
                } else {
                    this.$message({
                        type: 'error',
                        message: '新增操作在服务器端执行失败，请稍后重试！'
                    });
                }
            } catch (error) {
                console.error('接口调用出错:', error);
                this.$message({
                    type: 'error',
                    message: '网络或服务器出现问题，新增失败，请稍后重试！'
                });
            }
        },
        async getHbData1() {
            try {
                let res = await getHbData("?pageNum=" + this.page + "&pageSize=5")
                console.log('获取伙伴数据,返回结果', res);
                if (res && res) {
                    this.tableData = res.data;
                }
                console.log(this.tableData);
            } catch (error) {
                console.error('接口调用出错:', error);
                this.$message({
                    type: 'error',
                    message: '提交操作失败，请稍后重试或联系管理员！'
                });
            }
        }
    },
    data() {
        return {
            page: 1,
            tableRowClassName: '',
            activeName: '伙伴信息',
            dialogImageUrl: '',
            dialogVisible: false,
            radio: 0,
            inputName: '',
            inputSort: '0',
            inputCount: '',
            top: 1,
            pictureId: 0,
            id: 0,
            tableData: [],
            titleData: [{}],
            ruleForm: {
                content: '',
                name: '',
                sort: ''
            },
            rules: {
                xh: { required: true, numeric: true },
                name: { required: true },
                jj: { required: true }
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            console.log(this.activeName); // 查看此时activeName的值是否正确
        });
        this.getHbData1()
    }
}

</script>